<template>
  <div class="permission-manage">
    <div class="page-header">
      <h2>权限管理</h2>
      <p>管理系统中的所有权限</p>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <button @click="openAddDialog" class="btn-add">
        <span>+ 添加权限</span>
      </button>
    </div>

    <!-- 权限列表 -->
    <div class="permission-table">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>权限编码</th>
            <th>权限名称</th>
            <th>描述</th>
            <th>资源类型</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="permission in permissions" :key="permission.id">
            <td>{{ permission.id }}</td>
            <td>
              <code class="permission-code">{{ permission.permissionCode }}</code>
            </td>
            <td>{{ permission.permissionName }}</td>
            <td>{{ permission.description || '-' }}</td>
            <td>
              <span class="type-badge" :class="`type-${permission.resourceType}`">
                {{ permission.resourceType }}
              </span>
            </td>
            <td>
              <span 
                class="status-badge" 
                :class="permission.status === 1 ? 'status-active' : 'status-inactive'"
              >
                {{ permission.status === 1 ? '启用' : '禁用' }}
              </span>
            </td>
            <td>{{ formatDate(permission.createTime) }}</td>
            <td class="action-buttons">
              <button @click="openEditDialog(permission)" class="btn-edit">编辑</button>
              <button @click="deletePermission(permission)" class="btn-delete">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑权限对话框 -->
    <div v-if="showDialog" class="modal-overlay" @click.self="closeDialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ isEdit ? '编辑权限' : '添加权限' }}</h3>
          <button @click="closeDialog" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>权限编码 *</label>
            <input 
              v-model="permissionForm.permissionCode" 
              type="text" 
              placeholder="例如: item:audit"
              :disabled="isEdit"
            />
            <small>格式: 模块:操作，例如 user:list, role:add</small>
          </div>
          <div class="form-group">
            <label>权限名称 *</label>
            <input 
              v-model="permissionForm.permissionName" 
              type="text" 
              placeholder="例如: 审核物品"
            />
          </div>
          <div class="form-group">
            <label>权限描述</label>
            <textarea 
              v-model="permissionForm.description" 
              placeholder="描述该权限的功能"
              rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <label>资源类型 *</label>
            <select v-model="permissionForm.resourceType">
              <option value="menu">菜单(menu)</option>
              <option value="button">按钮(button)</option>
              <option value="api">接口(api)</option>
            </select>
          </div>
          <div class="form-group">
            <label>状态</label>
            <select v-model="permissionForm.status">
              <option :value="1">启用</option>
              <option :value="0">禁用</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="submitPermission" class="btn-primary">
            {{ isEdit ? '保存' : '添加' }}
          </button>
          <button @click="closeDialog" class="btn-cancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as adminAPI from '@/api/admin'

const permissions = ref([])
const showDialog = ref(false)
const isEdit = ref(false)

const permissionForm = ref({
  permissionCode: '',
  permissionName: '',
  description: '',
  resourceType: 'api',
  status: 1
})

// 加载权限列表
const loadPermissions = async () => {
  try {
    const res = await adminAPI.getAllPermissions()
    if (res.code === 200) {
      permissions.value = res.data || []
    }
  } catch (error) {
    ElMessage.error('获取权限列表失败')
  }
}

// 打开添加对话框
const openAddDialog = () => {
  isEdit.value = false
  permissionForm.value = {
    permissionCode: '',
    permissionName: '',
    description: '',
    resourceType: 'api',
    status: 1
  }
  showDialog.value = true
}

// 打开编辑对话框
const openEditDialog = (permission) => {
  isEdit.value = true
  permissionForm.value = { ...permission }
  showDialog.value = true
}

// 关闭对话框
const closeDialog = () => {
  showDialog.value = false
  permissionForm.value = {
    permissionCode: '',
    permissionName: '',
    description: '',
    resourceType: 'api',
    status: 1
  }
}

// 提交权限
const submitPermission = async () => {
  if (!permissionForm.value.permissionCode || !permissionForm.value.permissionName) {
    ElMessage.warning('请填写必填项')
    return
  }
  
  try {
    const api = isEdit.value ? adminAPI.updatePermission : adminAPI.addPermission
    const res = await api(permissionForm.value)
    
    if (res.code === 200) {
      ElMessage.success(isEdit.value ? '更新权限成功' : '添加权限成功')
      closeDialog()
      loadPermissions()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 删除权限
const deletePermission = async (permission) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除权限 ${permission.permissionName} 吗？此操作将同时删除该权限的所有关联！`, 
      '警告', 
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    
    const res = await adminAPI.deletePermission(permission.id)
    if (res.code === 200) {
      ElMessage.success('删除权限成功')
      loadPermissions()
    } else {
      ElMessage.error(res.msg || '删除权限失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除权限失败')
    }
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

onMounted(() => {
  loadPermissions()
})
</script>

<style scoped>
.permission-manage {
  padding: 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.action-bar {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-add {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-add:hover {
  background: #3aa876;
}

.permission-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #f8f8f8;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

th {
  font-weight: 600;
  color: #333;
}

td {
  color: #666;
}

.permission-code {
  padding: 2px 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  color: #d63384;
}

.type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-menu {
  background: #e3f2fd;
  color: #1976d2;
}

.type-button {
  background: #fff3e0;
  color: #f57c00;
}

.type-api {
  background: #f3e5f5;
  color: #7b1fa2;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-inactive {
  background: #ffebee;
  color: #c62828;
}

.action-buttons {
  white-space: nowrap;
}

.action-buttons button {
  padding: 6px 12px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.btn-edit {
  background: #ff9800;
  color: white;
}

.btn-edit:hover {
  background: #f57c00;
}

.btn-delete {
  background: #f44336;
  color: white;
}

.btn-delete:hover {
  background: #e53935;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #42b983;
}

.form-group small {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 12px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-primary {
  padding: 8px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary:hover {
  background: #3aa876;
}

.btn-cancel {
  padding: 8px 20px;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-cancel:hover {
  background: #e0e0e0;
}
</style>

